<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索结果 - 探索世界</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Helvetica Neue', Arial, sans-serif;
        }

        body {
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        ul {
            list-style: none;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        .btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .btn:hover {
            background-color: #45a049;
        }

        .section-title {
            text-align: center;
            margin-bottom: 30px;
            font-size: 28px;
            color: #2c3e50;
            position: relative;
            padding-bottom: 15px;
        }

        .section-title:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background-color: #4CAF50;
        }

        /* 头部样式 */
        header {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
        }

        .logo {
            font-size: 24px;
            font-weight: bold;
            color: #4CAF50;
        }

        .logo span {
            color: #2c3e50;
        }

        nav ul {
            display: flex;
        }

        nav ul li {
            margin-left: 20px;
        }

        nav ul li a {
            padding: 5px 10px;
            transition: color 0.3s;
        }

        nav ul li a:hover {
            color: #4CAF50;
        }

        nav ul li a.active {
            color: #4CAF50;
            font-weight: bold;
        }

        .auth-buttons {
            display: flex;
            gap: 10px;
        }

        .auth-buttons .btn {
            padding: 8px 15px;
        }

        .btn-login {
            background-color: transparent;
            color: #4CAF50;
            border: 1px solid #4CAF50;
        }

        .btn-login:hover {
            background-color: #4CAF50;
            color: white;
        }

        /* 搜索区域 */
        .search-section {
            padding: 30px 0;
            background-color: #e9f5e9;
        }

        .search-box {
            display: flex;
            max-width: 600px;
            margin: 0 auto;
        }

        .search-box input {
            flex: 1;
            padding: 15px;
            border: none;
            border-radius: 4px 0 0 4px;
            font-size: 16px;
        }

        .search-box button {
            padding: 15px 25px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
        }

        /* 搜索结果区域 */
        .search-results {
            padding: 40px 0;
        }

        .result-tabs {
            display: flex;
            justify-content: center;
            margin-bottom: 30px;
            border-bottom: 1px solid #ddd;
        }

        .tab {
            padding: 10px 20px;
            cursor: pointer;
            font-weight: bold;
            color: #666;
        }

        .tab.active {
            color: #4CAF50;
            border-bottom: 3px solid #4CAF50;
        }

        .result-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 25px;
        }

        .result-card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
        }

        .result-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }

        .card-img {
            height: 180px;
            overflow: hidden;
        }

        .card-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }

        .result-card:hover .card-img img {
            transform: scale(1.05);
        }

        .card-content {
            padding: 20px;
        }

        .card-content h3 {
            margin-bottom: 10px;
            font-size: 18px;
        }

        .card-content p {
            color: #666;
            margin-bottom: 15px;
            font-size: 14px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .card-meta {
            display: flex;
            justify-content: space-between;
            color: #888;
            font-size: 13px;
            margin-bottom: 15px;
        }

        .view-detail {
            display: inline-block;
            padding: 8px 15px;
            background-color: #4CAF50;
            color: white;
            border-radius: 4px;
            font-size: 14px;
            transition: background-color 0.3s;
        }

        .view-detail:hover {
            background-color: #45a049;
        }

        .no-results {
            text-align: center;
            padding: 50px 0;
            color: #666;
        }

        .no-results i {
            font-size: 48px;
            margin-bottom: 20px;
            color: #ccc;
        }

        /* 分页 */
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 40px;
            gap: 10px;
        }

        .pagination button {
            padding: 8px 15px;
            background-color: #f1f1f1;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .pagination button.active {
            background-color: #4CAF50;
            color: white;
        }

        .pagination button:hover:not(.active) {
            background-color: #ddd;
        }

        /* 页脚样式 */
        footer {
            background-color: #2c3e50;
            color: white;
            padding: 60px 0 20px;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }

        .footer-column h3 {
            margin-bottom: 20px;
            font-size: 18px;
        }

        .footer-column ul li {
            margin-bottom: 10px;
        }

        .footer-column ul li a:hover {
            color: #4CAF50;
        }

        .social-icons {
            display: flex;
            gap: 15px;
            margin-top: 15px;
        }

        .social-icons a {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            text-align: center;
            line-height: 40px;
            transition: background-color 0.3s;
        }

        .social-icons a:hover {
            background-color: #4CAF50;
        }

        .copyright {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 14px;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .header-container {
                flex-direction: column;
            }

            nav ul {
                margin: 15px 0;
            }

            .result-list {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
<!-- 头部导航 -->
<header>
    <div class="container header-container">
        <div class="logo">
            <a href="index.html">探索<span>世界</span></a>
        </div>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="scenic.html">景区</a></li>
                <li><a href="dot.html">景点</a></li>
                <li><a href="order.html">订单</a></li>
                <li><a href="guide.html">攻略</a></li>
                <li><a href="notes.html">游记</a></li>
            </ul>
        </nav>
        <div class="auth-buttons" id="authButtons">
            <!-- 登录状态由JavaScript动态生成 -->
        </div>
    </div>
</header>

<!-- 搜索区域 -->
<section class="search-section">
    <div class="container">
        <div class="search-box">
            <input type="text" id="searchInput" placeholder="搜索目的地、景点或攻略...">
            <button id="searchButton"><i class="fas fa-search"></i> 搜索</button>
        </div>
    </div>
</section>

<!-- 搜索结果 -->
<section class="search-results">
    <div class="container">
        <h2 class="section-title">搜索结果</h2>

        <div class="result-tabs">
            <div class="tab active" data-tab="all">全部</div>
            <div class="tab" data-tab="scenic">景区</div>
            <div class="tab" data-tab="dot">景点</div>
            <div class="tab" data-tab="guide">攻略</div>
            <div class="tab" data-tab="note">游记</div>
        </div>

        <div id="searchResults">
            <div class="result-list" id="resultList">
                <!-- 搜索结果将通过JavaScript动态加载 -->
            </div>

            <div class="no-results" id="noResults" style="display: none;">
                <i class="fas fa-search"></i>
                <h3>未找到相关结果</h3>
                <p>请尝试其他关键词</p>
            </div>
        </div>

        <div class="pagination" id="pagination">
            <!-- 分页将通过JavaScript动态加载 -->
        </div>
    </div>
</section>

<!-- 页脚 -->
<footer>
    <div class="container">
        <div class="footer-content">
            <div class="footer-column">
                <h3>关于我们</h3>
                <ul>
                    <li><a href="#">公司简介</a></li>
                    <li><a href="#">团队介绍</a></li>
                    <li><a href="#">企业文化</a></li>
                    <li><a href="#">加入我们</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h3>帮助中心</h3>
                <ul>
                    <li><a href="#">使用指南</a></li>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">服务条款</a></li>
                    <li><a href="#">隐私政策</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h3>合作伙伴</h3>
                <ul>
                    <li><a href="#">景区合作</a></li>
                    <li><a href="#">酒店合作</a></li>
                    <li><a href="#">旅行社合作</a></li>
                    <li><a href="#">广告投放</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h3>联系我们</h3>
                <ul>
                    <li><i class="fas fa-phone"></i> 400-123-4567</li>
                    <li><i class="fas fa-envelope"></i> info@exploreworld.com</li>
                    <li><i class="fas fa-map-marker-alt"></i> 北京市朝阳区某某大厦</li>
                </ul>
                <div class="social-icons">
                    <a href="#"><i class="fab fa-weibo"></i></a>
                    <a href="#"><i class="fab fa-weixin"></i></a>
                    <a href="#"><i class="fab fa-qq"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                </div>
            </div>
        </div>
        <div class="copyright">
            <p>© 2023 探索世界旅游网 版权所有</p>
        </div>
    </div>
</footer>

<!-- 引入Vue和Element UI -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.14/lib/index.js"></script>

<!-- 引入axios -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
    // 检查登录状态并更新导航栏
    function updateAuthButtons() {
        const authButtons = document.getElementById('authButtons');
        const cid = localStorage.getItem('cid');
        const userInfoStr = localStorage.getItem('userInfo');

        if (cid && userInfoStr) {
            // 用户已登录，显示个人中心和退出登录
            try {
                const userInfo = JSON.parse(userInfoStr);
                authButtons.innerHTML = `
                <span style="margin-right: 15px; color: #4CAF50;">欢迎，${userInfo.visitorsName || userInfo.realName || '用户'}</span>
                <a href="profile.html" class="btn">个人中心</a>
                <a href="#" class="btn btn-login" onclick="logout()">退出登录</a>
            `;
            } catch (e) {
                // 解析用户信息失败，显示默认登录状态
                authButtons.innerHTML = `
                <a href="login.html" class="btn btn-login">登录</a>
                <a href="register.html" class="btn">注册</a>
            `;
            }
        } else {
            // 用户未登录，显示登录注册按钮
            authButtons.innerHTML = `
            <a href="login.html" class="btn btn-login">登录</a>
            <a href="register.html" class="btn">注册</a>
        `;
        }
    }

    // 退出登录
    function logout() {
        localStorage.removeItem('cid');
        localStorage.removeItem('userInfo');
        updateAuthButtons();
        alert('您已成功退出登录');
    }

    // 获取URL参数
    function getQueryParam(name) {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get(name);
    }

    // 搜索功能
    class SearchPage {
        constructor() {
            this.keyword = getQueryParam('keyword') || '';
            this.currentPage = 1;
            this.pageSize = 8;
            this.currentTab = 'all';
            this.results = {
                scenic: [],
                dot: [],
                guide: [],
                note: []
            };
            this.total = {
                scenic: 0,
                dot: 0,
                guide: 0,
                note: 0
            };

            this.init();
        }

        init() {
            updateAuthButtons();
            this.bindEvents();

            if (this.keyword) {
                document.getElementById('searchInput').value = this.keyword;
                this.performSearch();
            }
        }

        bindEvents() {
            // 搜索按钮事件
            document.getElementById('searchButton').addEventListener('click', () => {
                this.keyword = document.getElementById('searchInput').value.trim();
                if (this.keyword) {
                    this.currentPage = 1;
                    this.performSearch();
                }
            });

            // 回车键搜索
            document.getElementById('searchInput').addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    this.keyword = document.getElementById('searchInput').value.trim();
                    if (this.keyword) {
                        this.currentPage = 1;
                        this.performSearch();
                    }
                }
            });

            // Tab切换事件
            document.querySelectorAll('.tab').forEach(tab => {
                tab.addEventListener('click', (e) => {
                    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
                    e.target.classList.add('active');
                    this.currentTab = e.target.getAttribute('data-tab');
                    this.currentPage = 1;
                    this.renderResults();
                });
            });
        }

        // 执行搜索
        performSearch() {
            if (!this.keyword) return;

            // 显示加载状态
            document.getElementById('resultList').innerHTML = '<div style="text-align:center;grid-column:1/-1;"><p>搜索中...</p></div>';
            document.getElementById('noResults').style.display = 'none';

            // 根据关键词内容决定搜索策略
            let searchPromises = [];

            // 如果关键词包含"景点"，优先搜索景点
            if (this.keyword.includes('景点')) {
                searchPromises = [
                    this.searchDots(),
                    this.searchScenics(),
                    this.searchGuides(),
                    this.searchNotes()
                ];
            } else {
                // 默认并行搜索所有类型
                searchPromises = [
                    this.searchScenics(),
                    this.searchDots(),
                    this.searchGuides(),
                    this.searchNotes()
                ];
            }

            Promise.all(searchPromises).then(() => {
                this.renderResults();
            }).catch(error => {
                console.error('搜索出错:', error);
                document.getElementById('resultList').innerHTML = '<div style="text-align:center;grid-column:1/-1;"><p>搜索出错，请稍后重试</p></div>';
            });
        }

        // 搜索景区
        searchScenics() {
            return axios.post('/scenic/queryByPage', {
                pageNo: 1,
                pageSize: 100,
                data: {
                    scenicName: this.keyword
                }
            }).then(response => {
                if (response.data.code === 200) {
                    this.results.scenic = response.data.data.list || [];
                    this.total.scenic = response.data.data.total || 0;
                }
            }).catch(error => {
                console.error('景区搜索出错:', error);
                this.results.scenic = [];
                this.total.scenic = 0;
            });
        }

        // 搜索景点
        searchDots() {
            return axios.post('/dot/queryByPage', {
                pageNo: 1,
                pageSize: 100,
                data: {
                    dotName: this.keyword
                }
            }).then(response => {
                if (response.data.code === 200) {
                    this.results.dot = response.data.data.list || [];
                    this.total.dot = response.data.data.total || 0;
                }
            }).catch(error => {
                console.error('景点搜索出错:', error);
                this.results.dot = [];
                this.total.dot = 0;
            });
        }

        // 搜索攻略
        searchGuides() {
            return axios.post('/guides/queryByPage', {
                pageNo: 1,
                pageSize: 100,
                data: {
                    title: this.keyword
                }
            }).then(response => {
                if (response.data.code === 200) {
                    // 获取攻略列表
                    this.results.guide = response.data.data.list || [];
                    this.total.guide = response.data.data.total || 0;

                    // 为每个攻略获取图片
                    const guideImagePromises = this.results.guide.map(guide => {
                        return axios.post('/guideImages/queryByPage', {
                            pageNo: 1,
                            pageSize: 10,
                            data: { guideId: guide.guideId }
                        }).then(imgResponse => {
                            if (imgResponse.data.code === 200) {
                                guide.images = imgResponse.data.data.list || [];
                            } else {
                                guide.images = [];
                            }
                        }).catch(() => {
                            guide.images = [];
                        });
                    });

                    return Promise.all(guideImagePromises);
                }
            }).catch(error => {
                console.error('攻略搜索出错:', error);
                this.results.guide = [];
                this.total.guide = 0;
            });
        }

        // 搜索游记
        searchNotes() {
            return axios.post('/notes/queryByPage', {
                pageNo: 1,
                pageSize: 100,
                data: {
                    title: this.keyword
                }
            }).then(response => {
                if (response.data.code === 200) {
                    // 获取游记列表
                    this.results.note = response.data.data.list || [];
                    this.total.note = response.data.data.total || 0;

                    // 为每个游记获取图片
                    const noteImagePromises = this.results.note.map(note => {
                        return axios.post('/noteImages/queryByPage', {
                            pageNo: 1,
                            pageSize: 10,
                            data: { noteId: note.noteId }
                        }).then(imgResponse => {
                            if (imgResponse.data.code === 200) {
                                note.images = imgResponse.data.data.list || [];
                            } else {
                                note.images = [];
                            }
                        }).catch(() => {
                            note.images = [];
                        });
                    });

                    return Promise.all(noteImagePromises);
                }
            }).catch(error => {
                console.error('游记搜索出错:', error);
                this.results.note = [];
                this.total.note = 0;
            });
        }

        // 渲染搜索结果
        renderResults() {
            const resultList = document.getElementById('resultList');
            const noResults = document.getElementById('noResults');

            let items = [];
            switch (this.currentTab) {
                case 'scenic':
                    items = this.results.scenic;
                    break;
                case 'dot':
                    items = this.results.dot;
                    break;
                case 'guide':
                    items = this.results.guide;
                    break;
                case 'note':
                    items = this.results.note;
                    break;
                default: // all
                    // 根据关键词内容决定显示优先级
                    if (this.keyword.includes('景点')) {
                        // 如果关键词包含"景点"，优先显示景点
                        const allItems = [
                            ...this.results.dot.map(item => ({...item, type: 'dot'})),
                            ...this.results.scenic.map(item => ({...item, type: 'scenic'})),
                            ...this.results.guide.map(item => ({...item, type: 'guide'})),
                            ...this.results.note.map(item => ({...item, type: 'note'}))
                        ];
                        items = allItems.slice(0, this.pageSize);
                    } else {
                        // 默认合并所有结果
                        const allItems = [
                            ...this.results.scenic.map(item => ({...item, type: 'scenic'})),
                            ...this.results.dot.map(item => ({...item, type: 'dot'})),
                            ...this.results.guide.map(item => ({...item, type: 'guide'})),
                            ...this.results.note.map(item => ({...item, type: 'note'}))
                        ];
                        // 按照一定规则混合排序
                        items = allItems.slice(0, this.pageSize);
                    }
                    break;
            }

            if (items.length === 0) {
                resultList.innerHTML = '';
                noResults.style.display = 'block';
                document.getElementById('pagination').innerHTML = '';
                return;
            }

            noResults.style.display = 'none';
            resultList.innerHTML = items.map(item => this.renderItem(item)).join('');
        }

        // 渲染单个项目
        renderItem(item) {
            let title, image, summary, meta, link, type;

            if (item.type === 'scenic' || item.scenicId) {
                type = 'scenic';
                title = item.scenicName;
                image = item.scover || 'https://source.unsplash.com/800x600/?mountain';
                summary = item.sintroduction ? item.sintroduction.substring(0, 100) + '...' : '暂无介绍';
                meta = `地址: ${item.saddress || '未知'}`;
                link = `scenic.html?scenicId=${item.scenicId}`;
            } else if (item.type === 'dot' || item.dotId) {
                type = 'dot';
                title = item.dotName;
                image = item.dotPic || 'https://source.unsplash.com/800x600/?scenic';
                summary = item.dotSummary ? item.dotSummary.substring(0, 100) + '...' : '暂无介绍';
                meta = `类型: ${item.type || '景点'}`;
                link = `dot.html?dotId=${item.dotId}`;
            } else if (item.type === 'guide' || item.guideId) {
                type = 'guide';
                title = item.title;
                // 获取攻略图片
                image = this.getGuideImage(item);
                summary = item.content ? item.content.substring(0, 100) + '...' : '暂无内容';
                meta = `作者: ${item.visitorsName || '未知'} | ${item.days || 0}天`;
                link = `guide.html?guideId=${item.guideId}`;
            } else if (item.type === 'note' || item.noteId) {
                type = 'note';
                title = item.title;
                // 获取游记图片
                image = this.getNoteImage(item);
                summary = item.content ? item.content.substring(0, 100) + '...' : '暂无内容';
                meta = `作者: ${item.visitorsName || '未知'} | 地点: ${item.location || '未知'}`;
                link = `notes.html?noteId=${item.noteId}`;
            }

            // 为攻略、游记和景点卡片添加正常的链接，移除onclick事件
            if (type === 'guide' || type === 'note' || type === 'dot') {
                return `
                    <div class="result-card">
                        <a href="${link}" style="text-decoration: none; color: inherit;">
                            <div class="card-img">
                                <img src="${image}" alt="${title}" onerror="this.src='https://source.unsplash.com/800x600/?travel'">
                            </div>
                            <div class="card-content">
                                <h3>${title}</h3>
                                <p>${summary}</p>
                                <div class="card-meta">
                                    <span>${meta}</span>
                                </div>
                                <span class="view-detail">查看详情</span>
                            </div>
                        </a>
                    </div>
                `;
            } else {
                return `
                    <div class="result-card">
                        <div class="card-img">
                            <img src="${image}" alt="${title}" onerror="this.src='https://source.unsplash.com/800x600/?travel'">
                        </div>
                        <div class="card-content">
                            <h3>${title}</h3>
                            <p>${summary}</p>
                            <div class="card-meta">
                                <span>${meta}</span>
                            </div>
                            <a href="${link}" class="view-detail">查看详情</a>
                        </div>
                    </div>
                `;
            }
        }

        // 获取攻略图片
        getGuideImage(guide) {
            // 这里应该调用接口获取攻略图片，暂时使用默认图片
            return guide.images && guide.images.length > 0 ?
                guide.images[0].imageUrl :
                'https://source.unsplash.com/800x600/?travel';
        }

        // 获取游记图片
        getNoteImage(note) {
            // 这里应该调用接口获取游记图片，暂时使用默认图片
            return note.images && note.images.length > 0 ?
                note.images[0].imageUrl :
                'https://source.unsplash.com/800x600/?journey';
        }
    }

    // 页面加载完成后初始化搜索
    document.addEventListener('DOMContentLoaded', function() {
        new SearchPage();
    });
</script>
</body>
</html>